{extend name="admin@common/main"/}

{block name="body"}
<div class="builder">
    <link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/magnific-popup.js/1.0.0/magnific-popup.min.css"/>
    <!-- 标题 -->
    <div class="main-title">
        <h2>
            {$title|htmlspecialchars}

            {if condition="$suggest"}<small>（{$suggest|htmlspecialchars}）</small>{/if}
        </h2>
    </div>
<!-- 按钮工具栏 -->
    <div class="button-box clearfix">
        <div class="fl">
            {if condition="count($searches) gt 0"}
                <button class="btn btn-info search-btn" target-form="ids" style="padding: 6px 16px;">
                    {:lang("_SEARCH_")}
                </button>
            {/if}

            {volist name="buttonList" id="button"}
                <{$button.tag} {$button.attr}>{$button.title}</{$button.tag}>&nbsp;
            {/volist}

            <!-- 选择框select -->
            <div style="float: right;" >
                <style>
                    .oneselect{
                        display: inline-block;
                        margin-left: 10px;
                    }
                    .oneselect .title{
                        float: left;
                        line-height: 32px;
                    }
                    .oneselect .select_box{
                        float: left;
                        line-height: 32px;
                    }
                    .oneselect .select_box select{
                        min-width: 200px;
                    }
                </style>
                <form id="selectForm" method="get" action="{$selectPostUrl}">
                    {volist name="selects" id="select"}
                    {php}$getName = input($select["name"]);{/php}
                        <div class="oneselect">
                            <div class="title">{$select.title}</div>
                            <div class="select_box">
                            <select name="{$select['name']}" data-role="select_text" class="form-control">
                                {volist name="select['arrvalue']" id="svo"}
                                    <option value="{$svo.id}" {eq name="svo.id" value='$getName'} selected{/eq}>
                                        {$svo.value}
                                    </option>
                                {/volist}
                            </select>
                            </div>
                        </div>
                    {/volist}
                </form>
            </div>
        </div>
    </div>
    <!--搜索框-->
    {php}
        $show=0;
        foreach($searches as $search){
            if(input($search['name'])){
                $show=1;
            }
        }
    {/php}
    <style>
        #searchForm .table td {vertical-align:middle;}
        #searchForm .table td.attr {text-align: right;}
    </style>
    <div {eq name="show" value='0'}style="display:none"{else /}style="display:block"{/eq} id="search_form">
        <form id="searchForm" method="get" action="{$searchPostUrl}">
            <div class="search-form cf">
                <table class="table tb_search">
                {volist name="searches" id="search"}
                    <!--判断搜索选项是TEXT还是SELECT-->
                    {php}$getName = input($search['name']);{/php}
                    {eq name="search['type']" value="select"}
                    <tr>
                        <td class="attr">{$search.title}</td>              
                        <td>
                        <select size="1" name="{$search['name']}" class="search-input form-control form-input-width">
                            <option value="">{:lang("_ALL_")}</option>
                            {volist name="search['arrvalue']" id="svo"}
                            <option value="{$svo.id}" {eq name="svo.id" value='$getName'}selected{/eq}>{$svo.value}</option>
                            {/volist}
                        </select>
                        </td>
                        <td>{$search.des}</td>
                    </tr>
                    {else/}
                    <tr>
                      <td class="attr">{$search.title}</td>
                      <td>
                          <input type="text" name="{$search.name}" class="search-input form-control form-input-width"
                                 value="{:input($search['name'])}">
                      </td>
                      <td>{$search.des}</td>
                    </tr>
                    {/eq}

                {/volist}
                    <tr><td></td>
                        <td>
                            <button type="submit" class="btn btn-info"><i class="icon icon-search"></i> Search</button>
                        <td></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
    <!-- 数据表格 -->
    <div class="with-padding">

        <table id="table-data" class="table table-bordered table-striped table-hover muu-table">
            <!-- 表头 -->
            <thead>
            <tr>
                <th class="row-selected row-selected" style="width: 20px">
                    <input type="checkbox" class="check-all" id="check-all">
                    <label for="check-all"></label>
                </th>
                {volist name="keyList" id="field"}
                    <th>{$field.title|htmlspecialchars}</th>
                {/volist}
            </tr>
            </thead>

            <!-- 列表 -->
            <tbody>
            {notempty name="list"}
            {volist name="list" id="e"}
                <tr>
                    <td>
                        <input class="ids" type="checkbox" id="ids-{notempty name="e['id']"}{$e['id']}{/notempty}" value="{notempty name="e['id']"}{$e['id']}{/notempty}" name="ids[]">
                        <label for="ids-{notempty name="e['id']"}{$e['id']}{/notempty}"></label>
                    </td>
                    {volist name="keyList" id="field"}
                        <td style="width:auto;max-width: {$field['width']};"  class="text-ellipsis">
                            {$e[$field['name']]}
                        </td>
                    {/volist}
                </tr>
            {/volist}
            {else /}
            <tr>{php}$col = count($keyList)+1;{/php}
                <td colspan={$col}><div style="text-align: center;">
                还没有数据哦~
            </div></td>
            <tr>
            
            {/notempty}
            </tbody>
        </table>
        <div class="page">
            {$page}
        </div>
    </div>
    <!-- 分页 -->
    
    <!--列表说明-->
    {notempty name="explain"}
    <div class="with-padding">
        <div class="alert">
            <h4>{$explain.title}</h4>
            <hr>
            <p>{$explain.content}</p>
        </div>
    </div>
    {/notempty}
</div>
{/block}
{block name="script"}

<script>
    $(function(){
        //点击排序
        $('.list_sort').click(function () {
            var url = $(this).attr('url');
            var ids = $('.ids:checked');
            var param = '';
            if (ids.length > 0) {
                var str = new Array();
                ids.each(function () {
                    str.push($(this).val());
                });
                param = str.join(',');
            }
            if (url != undefined && url != '') {
                window.location.href = url + '&ids=' + param;
            }
        });
        //显示隐藏搜索框
        $('.search-btn').click(function(){
            $('#search_form').toggle('slide');
        });
        //下拉选择框
        $('[data-role="select_text"]').change(function(){
            $('#selectForm').submit();
        });

        //模态弹窗
        $('[data-role="modal_popup"]').click(function(){
            var target_url=$(this).attr('modal-url');
            var data_title=$(this).attr('data-title');
            var target_form=$(this).attr('target-form');
            if(target_form!=undefined){
                //设置了参数时，把参数加入
                var form=$('.'+target_form);
                if (form.get(0) == undefined ) {
                    updateAlert('{:lang('_NO_OPERATIONAL_DATA_WITH_SINGLE_')}','danger');
                    return false;
                } else if (form.get(0).nodeName == 'FORM') {
                    query = form.serialize();
                } else if (form.get(0).nodeName == 'INPUT' || form.get(0).nodeName == 'SELECT' || form.get(0).nodeName == 'TEXTAREA') {
                    query = form.serialize();
                } else {
                    query = form.find('input,select,textarea').serialize();
                }
                if(!query.length && $(this).attr('can_null') != 'true'){
                    updateAlert('{:lang('_NO_OPERATIONAL_DATA_WITH_SINGLE_')}','danger');
                    return false;
                }
                target_url=target_url+'?'+query;
            }
            var myModalTrigger = new $.zui.ModalTrigger({
                'type':'ajax',
                'url':target_url,
                'title':data_title
            });
            myModalTrigger.show();
        });

        $('.tox-confirm').click(function(e){
            var text = $(this).attr('data-confirm');
            var result = confirm(text);
            if(result) {
                return true;
            } else {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        });
    });

    $(document).ready(function () {
        $('.popup-gallery').each(function () { // the containers for all your galleries
            $(this).magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: '{:lang("_LOADING_")}#%curr%...',
                mainClass: 'mfp-img-mobile',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image

                },
                image: {
                    tError: '<a href="%url%">{:lang("_PICTURE_")}#%curr%</a>{:lang("_COULD_NOT_BE_LOADED_")}',
                    titleSrc: function (item) {
                        /*           return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';*/
                        return '';
                    },
                    verticalFit: true
                }
            });
        });
    });

    $(function(){
        var reset=function(){
            if($('#main').width()-20<=$('#table-data').width()){
                $('#main').css('overflow-x','scroll');
            }else{
                $('#main').css('overflow-x','hidden');
            }
        };
        reset();
        $(window).resize(reset);
    });
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
{/block}